<template>
  <div>
    <orderHeaderVue title="本月数据分析" />
    <StatisticsVue title="Monthly Repoet" :Data="Data" v-if="loading" :key="Commond"/>
  </div>
</template>

<script>
import orderHeaderVue from "../components/orderHeader.vue";
import { defineComponent, onBeforeMount, onMounted, reactive,ref } from "vue";
import StatisticsVue from "../components/Statistics.vue";
import { queryweek,getYMD,Rule } from "../utils/tools";
import { postJSON } from "../utils/request";
export default defineComponent({
  components: {
    orderHeaderVue,
    StatisticsVue,
  },
  setup() {
    let myDate = new Date();
    var currentMonth = myDate.getMonth();
    var firstDay = new Date(myDate.getFullYear(),currentMonth,1)
    var lastDay = new Date(firstDay.getFullYear(),currentMonth + 1,0)
    
    firstDay = getYMD(firstDay).TimeData
    lastDay = getYMD(lastDay).TimeData

    // 获得这周得日期范围
    const NowDate = queryweek(myDate);

    // loading加载指令
    const loading = ref(false);

    // 这周开始得时间戳
    const WeekStartTime = NowDate.WeekStartDate;

    const Commond = ref(2);

    const Data = reactive({
      DateRange: [firstDay, lastDay],
      StatisticsData: {},
      reglabel:[]
    });

    for(let i = 1;i <= new Date(lastDay).getDate();i++){
        let params = '';
        params = Rule(myDate.getMonth() + 1) + '/' + Rule(i)
        Data.reglabel.push(params)
    }

    onMounted(async () => {
      let params = {
        WeekStartTime: firstDay,
        Months:new Date(firstDay).getMonth(),
        Year:new Date(firstDay).getUTCFullYear(),
        Week:new Date(firstDay).getDay(),
        Day:new Date(firstDay).getDate(),
        Commond: Commond.value,
      };

      await postJSON("/OneWeek", params).then((res) => {
        Data.StatisticsData = res.data;
        loading.value = true;
      });
    });

    console.log(Data);

    onMounted(() => {});
    return {
      Data,
      loading
    };
  },
});
</script>

<style scoped>
</style>